<template>
    <div class="main">
        <div class="parkings">
            <el-tag id="item" type="warning">车位地址</el-tag>
            <el-input
                v-model="parkings.address"
                placeholder="请输入新车位地址"
            ></el-input>
        </div>
        <div class="parkings">
            <el-tag id="item" type="danger">车位号</el-tag>
            <el-input
                v-model="parkings.number"
                placeholder="请输入新车位号"
            ></el-input>
        </div>
        <div class="parkings">
            <el-tag id="item" type="danger">产权信息</el-tag>
            <el-input
                v-model="parkings.property"
                placeholder="请输入新车位产权信息"
            ></el-input>
        </div>
        <div class="parkings">
            <el-tag id="item" type="danger">出租周期</el-tag>
            <el-input
                v-model="parkings.cycle"
                placeholder="请输入新车位出租周期"
            ></el-input>
        </div>
        <div class="parkings">
            <el-tag id="item" type="danger">价格</el-tag>
            <el-input
                v-model="parkings.price"
                placeholder="请输入新车位价格"
            ></el-input>
        </div>
        <el-row>
            <el-button type="primary" @click="add" round>上传新车位</el-button>
        </el-row>
    </div>
</template>

<script>
import axios from "axios";
import { createNamespacedHelpers } from "vuex";
const { mapActions, mapState } = createNamespacedHelpers("lessors");
export default {
    data() {
        return {
            parkings: {
                address: "",
                number: "",
                property: "",
                cycle: "",
                price: "",
            },
        };
    },
    mounted() {
        this.isLogin();
    },
    computed: {
        // 用状态机的计算属性来获取信息
        ...mapState(["lessorsAccount"]),
    },
    methods: {
        ...mapActions(["isLogin"]),
        // 添加学生
        async add() {
            // 发送请求，添加新车位
            console.log(this.lessorsAccount[0]._id);
            const { data } = await axios({
                url: "http://localhost:3000/parkings/addParkings",
                method: "post",
                data: {
                    ...this.parkings,
                    lessorsId: this.lessorsAccount[0]._id,
                },
            });
            console.log(data);
            // 添加完成后跳转到所有车位页面
            this.$router.push(`/system/parkingsList`);
        },
    },
};
</script>

<style lang="scss">
.img {
    width: 100%;
    display: flex;
    justify-content: center;
}
.parkings {
    margin: auto;
    span {
        display: inline-block;
        width: 50px;
        height: auto;
    }
    width: 500px;
    display: flex;
    align-items: center;
}
.el-tag {
    height: 40px;

    vertical-align: bottom;
    line-height: 40px;
}
#item {
    width: 150px;
}
</style>